<script setup>
import '../assets/home.css'
// import Details from './details.vue'
import router from '@/router'
import { ref, onMounted } from 'vue'
import axios from 'axios'
const adoptionData = ref([])
onMounted(() => {
  let api = 'https://apifoxmock.com/m2/4457699-4103776-default/183178684'
  axios.get(api).then((res) => {
    // adoptionData.value = res.data
    for (let i = 0; i < 6; i++) {
      adoptionData.value[i] = res.data[i]
    }
    console.log(adoptionData.value)
  })
})
function adopt() {
  router.push({ path: '/adopt' })
}
function shop() {
  router.push({ path: '/shop' })
}
function news() {
  router.push({ path: '/news' })
}
function details(i) {
  sessionStorage.setItem('id', i)
  router.push({ path: '/details' })
}
</script>

<template>
  <!-- 大图 B -->
  <div class="bgimg">
    <img
      src="https://cdn.pohome.cn/asset/carousel/donate.jpg"
      alt=""
    >
  </div>
  <!-- 大图 E -->
  <!-- 引导栏 B -->
  <div class="guide">
    <div class="card">
      <div class="img">
        <img
          src="https://www.pohome.cn/image/carousel/pet-small.jpg"
          alt=""
        >
      </div>
      <div
        class="card-body"
        @click="adopt"
      >领养</div>
    </div>
    <div class="card">
      <div class="img">
        <img
          src="https://www.pohome.cn/image/carousel/donate-small.jpg"
          alt=""
        >
      </div>
      <div
        class="card-body"
        @click="shop"
      >公益</div>
    </div>
    <div class="card">
      <div class="img">
        <img
          src="https://www.pohome.cn/image/carousel/event-small.jpg"
          alt=""
        >
      </div>
      <div
        class="card-body"
        @click="news"
      >志愿者</div>
    </div>
  </div>
  <!-- 引导栏 E -->
  <!-- 爱心活动 B -->
  <div class="activity">
    <div class="t">爱心活动</div>
    <div class="card">
      <div class="img">
        <img
          src="https://www.pohome.cn/upload/img/blog/feature/1386.jpeg"
          alt=""
        >
      </div>
      <div class="card-body">
        <div class="card-t">带着狗狗去踏青 | 付出的爱定会开出善良之花</div>
        <div class="card-p">清明假期，我们受邀参加鸭马路组织的踏青会，志愿者带着“开心”“大灰灰”和“咖啡”三个大号毛球以及汪喵周边义卖品、宣传品一起去HAPPY啦！ 认识了很多新朋友，也给领养中心的小可爱们狠狠的推了一波领养宣传。短暂的活动结束了，但大家都说，今年要带更多的小狗出去见世面，让我们一起露营吧~ 志愿者说：”养宠之前请想一想，无论生老病死，疾病与贫穷，幸运与快乐，你都愿意不离不弃，与它相伴一生吗？如果答案是“YES"，来领养一个它吧！“</div>
        <div
          class="card-btn"
          @click="news"
        >查看更多</div>
      </div>
    </div>
  </div>
  <!-- 爱心活动 E -->
  <!-- 领养推荐 B -->
  <div class="adoption">
    <div class="wave"></div>
    <div class="adoption-body">
      <div class="t">
        领养推荐
        <span @click="adopt">更多</span>
      </div>
      <div class="adoption-card">
        <div
          class="card"
          @click="details(item.id)"
          v-for="item in adoptionData"
          :key="item.id"
        >
          <div class="img">
            <img
              :src="item.img"
              alt=""
            >
          </div>
          <div class="name">{{item.name}}</div>
          <div class="p"><span>{{item.age}}</span><span>{{item.gender}}</span><span>{{item.variety}}</span></div>
        </div>
      </div>
    </div>
  </div>
  <!-- 领养推荐 E -->

</template>
